<template>
    <div>
        <div>
          <el-table :data="leave" border stripe size="mini"  fit :cell-style="{ textAlign: 'center' }">
            <el-table-column type="selection" align="left" ></el-table-column>
            <el-table-column prop="userName" label="姓名" fixed  align="center"></el-table-column>
            <el-table-column prop="leaveType" label="类型" align="center"></el-table-column>
            <el-table-column prop="startDate" label="开始时间"  align="center"></el-table-column>
            <el-table-column prop="endDate" label="结束时间"  align="center"></el-table-column>
            <el-table-column prop="reason" label="原因"  align="center"></el-table-column>
            <el-table-column prop="status" label="审核状态"  align="center"></el-table-column>
            <el-table-column prop="approvalDate" label="通过时间"  align="center"></el-table-column>
            <el-table-column prop="file" label="文件"  align="center">
              <template #default="scope">
                <div style="margin: 20px 0">
                  <el-button type="primary" size="mini" plain @click="handlePoorAdd(scope.row.id)">提交申请</el-button>
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="approveName" label="审核人" align="center"></el-table-column>
            <el-table-column label="操作" align="center">
              <template #default="scope">
                <el-button v-if="scope.row.status === '待审批'" type="primary" size="small" @click="handleAudit(scope.row)">审核</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>

      <el-dialog title="请假证明上传" :visible.sync="uploadVisible" width="40%" :close-on-click-modal="false" destroy-on-close>
        <el-form label-width="100px" style="padding-right: 50px" :model="form">
          <el-form-item prop="file" label="证明材料">
            <el-upload
                class="avatar-uploader"
                :action="'http://localhost:8080' + '/files/upload'"
                list-type="text"
                :on-success="handlePoorSuccess"
            >
              <el-button type="primary">上传文件</el-button>
            </el-upload>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="uploadVisible = false">取 消</el-button>
          <el-button type="primary" @click="save">确 定</el-button>
        </div>
      </el-dialog>

      <el-dialog :visible.sync="auditDialogVisible" title="审核请假申请">
        <!-- 使用 el-form 包裹，用于表单验证 -->
        <el-form :model="form" :rules="rules" ref="formRef">
          <el-form-item  prop="auditStatus">
            <el-radio-group v-model="form.auditStatus">
              <el-radio label="审核通过">审核通过</el-radio>
              <el-radio label="审核不通过">审核不通过</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <template #footer>
        <span>
          <el-button @click="auditDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="submitAudit">确定</el-button>
        </span>
        </template>
      </el-dialog>
    </div>
</template>

<script>
    export default {
        data() {
            return {
              user: JSON.parse(window.sessionStorage.getItem("user")),
              leave: [],
              auditDialogVisible: false,
              uploadVisible: false,
              form: {
                auditStatus: ''
              },
              currentLeaveId: null,
              fileId: '',
              currentId: null,
              $baseUrl:'http://localhost:8081',
              rules: {
                auditStatus: [
                  { required: true, message: '请选择审核结果', trigger: 'change' }
                ]
              }
            }
        },
        mounted() {
            this.initLeave();
        },
        methods: {
          save(){
            const data = {
              id: this.currentId,
              file: this.form.file
            };
            this.postRequest('/employee/leave/file', data).then(res => {
              this.uploadVisible = false;
            }).catch(error => {
                  console.error('保存失败');
                });
          },
          handlePoorAdd(id){
            this.currentId= id;
            this.uploadVisible=true;
          },
          handlePoorSuccess(response){
            console.log('文件上传成功后的返回值：', response);
            this.form.file=response
            console.log('文件值：', this.form.file);
          },

          handleAudit(row) {
            this.auditStatus = '';
            this.auditDialogVisible = true;
            this.currentLeaveId = row.id;
          },
          submitAudit() {
            this.requestData = {
              id: this.currentLeaveId,
              approverId: this.user.id,
              status: this.form.auditStatus
            }
            this.$refs.formRef.validate(valid => {
              if (valid) {
                this.putRequest('/employee/leave/approve/', this.requestData).then(resp => {
                  if (resp) {
                    this.auditDialogVisible = false;
                    this.initLeave();
                    this.auditStatus = ''
                  }
                });
              }
            });
          },

          submitaudit() {
            const url = `/employee/leave/approve?id=${this.currentLeaveId}&approverId=${this.user.id}&status=${this.auditStatus}`
            this.putRequest(url, {}).then(resp => {
              if (resp) {
                this.auditDialogVisible = false;
                this.initLeave(); // 刷新列表
              }
            });
          },

          initLeave(){
            this.getRequest("/employee/leave/select").then(resp => {
                       if (resp) {
                           this.leave = resp;
                       }
                  })
               },
          }
    }
</script>

<style scoped>

</style>
